<template>
  <div class="admin-dashboard-container">
    <!-- 统计卡片行 -->
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :md="6" :lg="6" v-for="(item, index) in statCards" :key="index">
        <el-card class="stat-card" :body-style="{ padding: '20px' }">
          <div class="card-content">
            <div class="icon-container" :style="{ backgroundColor: item.color }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ item.value }}</div>
              <div class="stat-title">{{ item.title }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表行 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 活动统计趋势图 -->
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>活动统计趋势</span>
              <el-select v-model="activityChartTimeRange" size="small" @change="updateActivityChart">
                <el-option label="近7天" value="week"></el-option>
                <el-option label="近30天" value="month"></el-option>
                <el-option label="近一年" value="year"></el-option>
              </el-select>
            </div>
          </template>
          <div class="chart-container" ref="activityTrendChart"></div>
        </el-card>
      </el-col>

      <!-- 用户增长图 -->
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户增长趋势</span>
              <el-select v-model="userGrowthTimeRange" size="small" @change="updateUserGrowthChart">
                <el-option label="近7天" value="week"></el-option>
                <el-option label="近30天" value="month"></el-option>
                <el-option label="近一年" value="year"></el-option>
              </el-select>
            </div>
          </template>
          <div class="chart-container" ref="userGrowthChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="chart-row">
      <!-- 活动类型分布图 -->
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>活动类型分布</span>
            </div>
          </template>
          <div class="chart-container" ref="activityTypeChart"></div>
        </el-card>
      </el-col>

      <!-- 用户评价分布图 -->
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>用户评价分布</span>
            </div>
          </template>
          <div class="chart-container" ref="evaluationChart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 最新数据表格 -->
    <el-row :gutter="20">
      <!-- 最新活动列表 -->
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="latest-data-card">
          <template #header>
            <div class="card-header">
              <span>最新活动</span>
              <el-button class="button" text @click="navigateTo('/admin/activity')">查看更多</el-button>
            </div>
          </template>
          <el-table :data="latestActivities" style="width: 100%" :max-height="300">
            <el-table-column prop="title" label="活动名称" min-width="180" show-overflow-tooltip />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="getActivityStatusType(scope.row.status)">
                  {{ getActivityStatusText(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="150" />
          </el-table>
        </el-card>
      </el-col>

      <!-- 最新用户列表 -->
      <el-col :xs="24" :sm="24" :md="12">
        <el-card class="latest-data-card">
          <template #header>
            <div class="card-header">
              <span>最新用户</span>
              <el-button class="button" text @click="navigateTo('/admin/user')">查看更多</el-button>
            </div>
          </template>
          <el-table :data="latestUsers" style="width: 100%" :max-height="300">
            <el-table-column prop="name" label="姓名" min-width="120" />
            <el-table-column prop="studentId" label="学号" min-width="120" />
            <el-table-column prop="gender" label="性别" width="80">
              <template #default="scope">
                {{ getGenderText(scope.row.gender) }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="注册时间" width="150" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import * as echarts from 'echarts';
import { 
  Tickets, User, DataAnalysis, Trophy, 
  PieChart, Histogram, Calendar, CollectionTag 
} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { getAdminDashboardStats, getActivityTrend, getUserGrowthTrend } from '@/api/stat';

const router = useRouter();

// 统计卡片数据
const statCards = reactive([
  { title: '总活动数', value: 0, icon: 'Calendar', color: '#409EFF' },
  { title: '总用户数', value: 0, icon: 'User', color: '#67C23A' },
  { title: '待审核活动', value: 0, icon: 'Tickets', color: '#E6A23C' },
  { title: '已完成活动', value: 0, icon: 'Trophy', color: '#F56C6C' }
]);

// 图表相关
const activityTrendChart = ref(null);
const userGrowthChart = ref(null);
const activityTypeChart = ref(null);
const evaluationChart = ref(null);

// 图表时间范围选择
const activityChartTimeRange = ref('month');
const userGrowthTimeRange = ref('month');

// 最新活动数据
const latestActivities = ref([]);

// 最新用户数据
const latestUsers = ref([]);

// 图表实例
let activityTrendChartInstance = null;
let userGrowthChartInstance = null;
let activityTypeChartInstance = null;
let evaluationChartInstance = null;

// 获取活动状态类型
const getActivityStatusType = (status) => {
  const statusMap = {
    0: 'info',     // 未开始
    1: 'success',  // 报名中
    2: 'warning',  // 进行中
    3: 'danger',   // 已结束
    4: 'info'      // 已取消
  };
  return statusMap[status] || 'info';
};

// 获取活动状态文本
const getActivityStatusText = (status) => {
  const statusMap = {
    0: '未开始',
    1: '报名中',
    2: '进行中',
    3: '已结束',
    4: '已取消'
  };
  return statusMap[status] || '未知';
};

// 获取性别文本
const getGenderText = (gender) => {
  const genderMap = {
    0: '未知',
    1: '男',
    2: '女'
  };
  return genderMap[gender] || '未知';
};

// 导航到指定路径
const navigateTo = (path) => {
  router.push(path);
};

// 获取仪表盘统计数据
const fetchDashboardStats = async () => {
  try {
    // 调用API获取管理员后台统计数据
    const res = await getAdminDashboardStats();
    if (res && res.code === 200) {
      const data = res.data;
      
      // 更新统计卡片数据
      statCards[0].value = data.totalActivities || 0; // 总活动数
      statCards[1].value = data.totalUsers || 0; // 总用户数
      statCards[2].value = data.pendingActivities || 0; // 待审核活动
      statCards[3].value = data.completedActivities || 0; // 已完成活动
      
      // 更新最新活动列表
      if (data.latestActivities && data.latestActivities.length > 0) {
        latestActivities.value = data.latestActivities;
      } else {
        setDefaultActivities();
      }
      
      // 更新最新用户列表
      if (data.latestUsers && data.latestUsers.length > 0) {
        latestUsers.value = data.latestUsers;
      } else {
        setDefaultUsers();
      }
    } else {
      // 使用模拟数据
      setTimeout(() => {
        statCards[0].value = 120; // 总活动数
        statCards[1].value = 580; // 总用户数
        statCards[2].value = 15;  // 待审核活动
        statCards[3].value = 85;  // 已完成活动
      }, 500);
      setDefaultActivities();
      setDefaultUsers();
    }
  } catch (error) {
    console.error('获取统计数据失败:', error);
    ElMessage.error('获取统计数据失败，请稍后重试');
    
    // 使用模拟数据
    setTimeout(() => {
      statCards[0].value = 120; // 总活动数
      statCards[1].value = 580; // 总用户数
      statCards[2].value = 15;  // 待审核活动
      statCards[3].value = 85;  // 已完成活动
    }, 500);
    setDefaultActivities();
    setDefaultUsers();
  }
};

// 设置默认活动数据
const setDefaultActivities = () => {
  latestActivities.value = [
    { id: 1, title: '校园环保清洁日', status: 1, createTime: '2023-10-15 08:00' },
    { id: 2, title: '敬老院志愿服务', status: 2, createTime: '2023-10-10 09:30' },
    { id: 3, title: '图书馆整理活动', status: 0, createTime: '2023-10-20 14:00' },
    { id: 4, title: '校园文化节志愿者', status: 1, createTime: '2023-10-25 10:00' },
    { id: 5, title: '义务植树活动', status: 3, createTime: '2023-11-01 09:00' }
  ];
};

// 设置默认用户数据
const setDefaultUsers = () => {
  latestUsers.value = [
    { id: 1, name: '张三', studentId: '20230001', gender: 1, createTime: '2023-10-15 08:00' },
    { id: 2, name: '李四', studentId: '20230002', gender: 1, createTime: '2023-10-14 09:30' },
    { id: 3, name: '王五', studentId: '20230003', gender: 1, createTime: '2023-10-13 14:00' },
    { id: 4, name: '赵六', studentId: '20230004', gender: 1, createTime: '2023-10-12 10:00' },
    { id: 5, name: '钱七', studentId: '20230005', gender: 2, createTime: '2023-10-11 09:00' }
  ];
};

// 初始化活动趋势图表
const initActivityTrendChart = () => {
  activityTrendChartInstance = echarts.init(activityTrendChart.value);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['新增活动', '报名人数']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['9/1', '9/5', '9/10', '9/15', '9/20', '9/25', '9/30']
    },
    yAxis: [
      {
        type: 'value',
        name: '活动数',
        position: 'left',
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        type: 'value',
        name: '人数',
        position: 'right',
        axisLabel: {
          formatter: '{value}'
        }
      }
    ],
    series: [
      {
        name: '新增活动',
        type: 'bar',
        yAxisIndex: 0,
        data: [5, 8, 12, 6, 9, 15, 10],
        itemStyle: {
          color: '#409EFF'
        }
      },
      {
        name: '报名人数',
        type: 'line',
        yAxisIndex: 1,
        smooth: true,
        data: [42, 68, 96, 65, 85, 120, 98],
        itemStyle: {
          color: '#67C23A'
        }
      }
    ]
  };
  
  activityTrendChartInstance.setOption(option);
};

// 更新活动趋势图表
const updateActivityChart = async () => {
  try {
    // 调用API获取活动趋势数据
    const res = await getActivityTrend(activityChartTimeRange.value);
    if (res && res.code === 200) {
      const data = res.data;
      
      activityTrendChartInstance.setOption({
        xAxis: {
          data: data.xAxis || []
        },
        series: [
          {
            name: '新增活动',
            data: data.activityData || []
          },
          {
            name: '报名人数',
            data: data.registrationData || []
          }
        ]
      });
    } else {
      // 如果API调用失败，使用默认数据
      let xAxisData = [];
      let activityData = [];
      let registrationData = [];
      
      if (activityChartTimeRange.value === 'week') {
        xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        activityData = [3, 5, 8, 4, 6, 9, 7];
        registrationData = [25, 40, 65, 35, 48, 72, 56];
      } else if (activityChartTimeRange.value === 'month') {
        xAxisData = ['9/1', '9/5', '9/10', '9/15', '9/20', '9/25', '9/30'];
        activityData = [5, 8, 12, 6, 9, 15, 10];
        registrationData = [42, 68, 96, 65, 85, 120, 98];
      } else if (activityChartTimeRange.value === 'year') {
        xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        activityData = [15, 12, 20, 25, 28, 22, 18, 15, 30, 35, 25, 20];
        registrationData = [120, 95, 160, 200, 220, 175, 145, 120, 240, 280, 200, 160];
      }
      
      activityTrendChartInstance.setOption({
        xAxis: {
          data: xAxisData
        },
        series: [
          {
            name: '新增活动',
            data: activityData
          },
          {
            name: '报名人数',
            data: registrationData
          }
        ]
      });
    }
  } catch (error) {
    console.error('获取活动趋势数据失败:', error);
    ElMessage.error('获取活动趋势数据失败，请稍后重试');
    
    // 使用默认数据
    let xAxisData = [];
    let activityData = [];
    let registrationData = [];
    
    if (activityChartTimeRange.value === 'week') {
      xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      activityData = [3, 5, 8, 4, 6, 9, 7];
      registrationData = [25, 40, 65, 35, 48, 72, 56];
    } else if (activityChartTimeRange.value === 'month') {
      xAxisData = ['9/1', '9/5', '9/10', '9/15', '9/20', '9/25', '9/30'];
      activityData = [5, 8, 12, 6, 9, 15, 10];
      registrationData = [42, 68, 96, 65, 85, 120, 98];
    } else if (activityChartTimeRange.value === 'year') {
      xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      activityData = [15, 12, 20, 25, 28, 22, 18, 15, 30, 35, 25, 20];
      registrationData = [120, 95, 160, 200, 220, 175, 145, 120, 240, 280, 200, 160];
    }
    
    activityTrendChartInstance.setOption({
      xAxis: {
        data: xAxisData
      },
      series: [
        {
          name: '新增活动',
          data: activityData
        },
        {
          name: '报名人数',
          data: registrationData
        }
      ]
    });
  }
};

// 初始化用户增长图表
const initUserGrowthChart = () => {
  userGrowthChartInstance = echarts.init(userGrowthChart.value);
  
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['9/1', '9/5', '9/10', '9/15', '9/20', '9/25', '9/30']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        smooth: true,
        data: [15, 12, 18, 24, 20, 28, 22],
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#67C23A' },
              { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
            ]
          }
        },
        itemStyle: {
          color: '#67C23A'
        }
      }
    ]
  };
  
  userGrowthChartInstance.setOption(option);
};

// 更新用户增长图表
const updateUserGrowthChart = async () => {
  try {
    // 调用API获取用户增长趋势数据
    const res = await getUserGrowthTrend(userGrowthTimeRange.value);
    if (res && res.code === 200) {
      const data = res.data;
      
      userGrowthChartInstance.setOption({
        xAxis: {
          data: data.xAxis || []
        },
        series: [
          {
            name: '新增用户',
            data: data.userData || []
          }
        ]
      });
    } else {
      // 如果API调用失败，使用默认数据
      let xAxisData = [];
      let userData = [];
      
      if (userGrowthTimeRange.value === 'week') {
        xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
        userData = [8, 10, 15, 12, 18, 20, 16];
      } else if (userGrowthTimeRange.value === 'month') {
        xAxisData = ['9/1', '9/5', '9/10', '9/15', '9/20', '9/25', '9/30'];
        userData = [15, 12, 18, 24, 20, 28, 22];
      } else if (userGrowthTimeRange.value === 'year') {
        xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        userData = [45, 32, 56, 68, 50, 42, 38, 35, 70, 85, 65, 55];
      }
      
      userGrowthChartInstance.setOption({
        xAxis: {
          data: xAxisData
        },
        series: [
          {
            name: '新增用户',
            data: userData
          }
        ]
      });
    }
  } catch (error) {
    console.error('获取用户增长趋势数据失败:', error);
    ElMessage.error('获取用户增长趋势数据失败，请稍后重试');
    
    // 使用默认数据
    let xAxisData = [];
    let userData = [];
    
    if (userGrowthTimeRange.value === 'week') {
      xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      userData = [8, 10, 15, 12, 18, 20, 16];
    } else if (userGrowthTimeRange.value === 'month') {
      xAxisData = ['9/1', '9/5', '9/10', '9/15', '9/20', '9/25', '9/30'];
      userData = [15, 12, 18, 24, 20, 28, 22];
    } else if (userGrowthTimeRange.value === 'year') {
      xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      userData = [45, 32, 56, 68, 50, 42, 38, 35, 70, 85, 65, 55];
    }
    
    userGrowthChartInstance.setOption({
      xAxis: {
        data: xAxisData
      },
      series: [
        {
          name: '新增用户',
          data: userData
        }
      ]
    });
  }
};

// 初始化活动类型分布图表
const initActivityTypeChart = () => {
  activityTypeChartInstance = echarts.init(activityTypeChart.value);
  
  // 从Dashboard数据中获取活动类型分布数据
  getAdminDashboardStats().then(res => {
    if (res && res.code === 200 && res.data.activityTypes) {
      const activityTypes = res.data.activityTypes;
      
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: activityTypes.map(item => item.name)
        },
        series: [
          {
            name: '活动类型',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: activityTypes
          }
        ]
      };
      
      activityTypeChartInstance.setOption(option);
    } else {
      // 使用默认数据
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['环保类', '教育类', '文化类', '社区服务', '其他']
        },
        series: [
          {
            name: '活动类型',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 35, name: '环保类' },
              { value: 25, name: '教育类' },
              { value: 20, name: '文化类' },
              { value: 15, name: '社区服务' },
              { value: 5, name: '其他' }
            ]
          }
        ]
      };
      
      activityTypeChartInstance.setOption(option);
    }
  }).catch(error => {
    console.error('获取活动类型分布数据失败:', error);
    
    // 使用默认数据
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 10,
        data: ['环保类', '教育类', '文化类', '社区服务', '其他']
      },
      series: [
        {
          name: '活动类型',
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 35, name: '环保类' },
            { value: 25, name: '教育类' },
            { value: 20, name: '文化类' },
            { value: 15, name: '社区服务' },
            { value: 5, name: '其他' }
          ]
        }
      ]
    };
    
    activityTypeChartInstance.setOption(option);
  });
};

// 初始化用户评价分布图表
const initEvaluationChart = () => {
  evaluationChartInstance = echarts.init(evaluationChart.value);
  
  // 从Dashboard数据中获取评价分布数据
  getAdminDashboardStats().then(res => {
    if (res && res.code === 200 && res.data.evaluationDistribution) {
      const evaluationData = res.data.evaluationDistribution;
      
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '评价分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: evaluationData.map(item => {
              // 添加颜色
              const colors = {
                '非常满意': '#67C23A',
                '满意': '#409EFF',
                '一般': '#E6A23C',
                '不满意': '#F56C6C'
              };
              return {
                ...item,
                itemStyle: { color: colors[item.name] || '#909399' }
              };
            })
          }
        ]
      };
      
      evaluationChartInstance.setOption(option);
    } else {
      // 使用默认数据
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '评价分布',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 48, name: '非常满意', itemStyle: { color: '#67C23A' } },
              { value: 32, name: '满意', itemStyle: { color: '#409EFF' } },
              { value: 15, name: '一般', itemStyle: { color: '#E6A23C' } },
              { value: 5, name: '不满意', itemStyle: { color: '#F56C6C' } }
            ]
          }
        ]
      };
      
      evaluationChartInstance.setOption(option);
    }
  }).catch(error => {
    console.error('获取评价分布数据失败:', error);
    
    // 使用默认数据
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '评价分布',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '16',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 48, name: '非常满意', itemStyle: { color: '#67C23A' } },
            { value: 32, name: '满意', itemStyle: { color: '#409EFF' } },
            { value: 15, name: '一般', itemStyle: { color: '#E6A23C' } },
            { value: 5, name: '不满意', itemStyle: { color: '#F56C6C' } }
          ]
        }
      ]
    };
    
    evaluationChartInstance.setOption(option);
  });
};

// 初始化所有图表
const initAllCharts = async () => {
  await nextTick();
  
  // 初始化图表
  initActivityTrendChart();
  initUserGrowthChart();
  initActivityTypeChart();
  initEvaluationChart();
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    activityTrendChartInstance.resize();
    userGrowthChartInstance.resize();
    activityTypeChartInstance.resize();
    evaluationChartInstance.resize();
  });
};

// 初始化数据
const initData = async () => {
  // 获取统计数据
  await fetchDashboardStats();
  
  // 初始化图表
  await initAllCharts();
};

// 页面加载时
onMounted(() => {
  initData();
});
</script>

<style lang="scss" scoped>
.admin-dashboard-container {
  padding: 20px;
  
  .el-row {
    margin-bottom: 20px;
  }
  
  .stat-card {
    height: 120px;
    margin-bottom: 20px;
    
    .card-content {
      display: flex;
      align-items: center;
      height: 100%;
      
      .icon-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 64px;
        height: 64px;
        border-radius: 8px;
        margin-right: 15px;
        
        .el-icon {
          font-size: 32px;
          color: white;
        }
      }
      
      .stat-info {
        .stat-value {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          line-height: 1.5;
        }
        
        .stat-title {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
  
  .chart-row {
    margin-top: 20px;
  }
  
  .chart-card {
    margin-bottom: 20px;
    
    .chart-container {
      height: 300px;
    }
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .latest-data-card {
    margin-bottom: 20px;
  }
}
</style> 